<template>
  <div class="equipment-list flex flex-column">
    <radio-group v-if="showTypeRadio" v-model="type" :data-list="typeList" class="flex-fixed" style="margin: 15px" />
    <antd-form-wrap
      :options="formOptions"
      :form-buttons="{ fixRight: false }"
      class="flex-fixed"
      style="margin: 15px"
      @submit="filterValue = $event"
    />
    <common-table
      ref="tableRef"
      class="flex-auto-height"
      :fetch="getDataAsync"
      :fetch-params="paramsData"
      :columns="columns"
      :show-toolbar="false"
      @vue:mounted="() => $refs.tableRef.load()"
    >
      <template #index="{ text, scope, index }">{{ index + 1 }}</template>
      <template #type="{ text }">{{ typeObj[text] || '-' }}</template>
      <template #action="{ text, scope }">
        <span style="color: #62b8b1; cursor: pointer" @click="details(scope)">详情</span>
      </template>
    </common-table>
  </div>
</template>

<script>
import AntdFormWrap from '@gis/lib/components/antd-form/index.vue';
import RadioGroup from '@gis/lib/components/radio-button-group.vue';
import CommonTable from '@gis/lib/components/vex-table/index.vue';
// import { openDeviceDialog } from '@/views/equipment-manage/components/overview-info/overview-info-dialog.js';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { useDicDataStore } from '@gis/lib/pinia/dicData.js';
import isEqual from 'lodash-es/isEqual.js';
import find from 'lodash-es/find.js';
import {
  faceEntranceList,
  vehicleRoadList,
  smokeDetectionList,
  intelligentBraceletList,
  plentyEngineeringList,
  equipmentManageDJZD,
} from '@gis/lib/api';

const columnsMap = {
  0: [
    {
      title: '小区名称',
      dataIndex: 'yard_name',
    },
    {
      title: '设备名称',
      dataIndex: 'name',
    },
  ],
  1: [
    {
      title: '小区名称',
      dataIndex: 'yard_name',
    },
    {
      title: '设备名称',
      dataIndex: 'name',
    },
  ],
  2: [
    {
      title: '设备名称',
      dataIndex: 'name',
    },
    {
      title: '设备类型',
      dataIndex: 'type',
      scopedSlots: { customRender: 'type' },
    },
  ],
  3: [
    {
      title: '小区/社区名称',
      dataIndex: 'area_name',
    },
    {
      title: '设备名称',
      dataIndex: 'monitor_name',
    },
  ],
  4: [
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '设备号',
      dataIndex: 'imei',
    },
    {
      title: '数据更新时间',
      dataIndex: 'modify_time',
    },
  ],
  5: [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '小区名称',
      dataIndex: 'yard_name',
    },
    {
      title: '地址',
      dataIndex: 'address',
    },
  ],
};

export default {
  name: 'equipment-list',
  components: { AntdFormWrap, CommonTable, RadioGroup },
  props: {
    activeKey: { type: String, default: '0' },
    showTypeRadio: { type: Boolean, default: true },
  },
  data() {
    return {
      type: this.activeKey,
      typeList: [
        { label: '人脸门禁', value: '0', type: 'rlmj' },
        { label: '车辆道闸', value: '1', type: 'cldz' },
        { label: '物联设备', value: '2', type: 'ygjc' },
        { label: '雪亮工程', value: '3', type: 'xlgc' },
        { label: '智能手环', value: '4', type: 'znsh' },
        { label: '登记终端', value: '5', type: 'djzd' },
      ],
      filterValue: {},
      columns: [],
      basicColumns: [
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 80,
        },
      ],
      apiObject: {
        0: faceEntranceList,
        1: vehicleRoadList,
        2: smokeDetectionList, //物联设备列表
        3: plentyEngineeringList,
        4: intelligentBraceletList,
        5: equipmentManageDJZD,
      },
      filterKeyList: ['door_name', 'gate_name', 'name', 'monitor_name', 'name'],
    };
  },
  computed: {
    typeObj() {
      const dicDataStore = useDicDataStore();
      return dicDataStore.getDicData('D0114');
    },
    formOptions() {
      return [
        {
          component: 'a-input',
          field: this.filterKeyList[this.type],
          colSpan: 6,
          wrapperCol: { span: 24 },
        },
      ];
    },
    apiParams() {
      const userInfoStore = useUserInfoStore();
      return { area_code: userInfoStore.area_code };
    },
    paramsData() {
      return Object.assign({}, this.apiParams, this.filterValue);
    },
  },
  watch: {
    type: {
      immediate: true,
      handler(newValue, oldValue) {
        if (!isEqual(newValue, oldValue)) {
          this.filterValue = {};
          this.columns = [].concat(this.basicColumns);
          this.columns.splice(1, 0, ...columnsMap[this.type]);
        }
      },
    },
  },
  methods: {
    async getDataAsync(params) {
      if (!params || !params.area_code) return;
      if (this.type == '5') {
        params['type'] = 'djzd';
      }
      const { data = {} } = await this.apiObject[this.type](params);
      return { data: data.list, total: data.count };
    },
    details(data) {
      // const tab = find(this.typeList, (item) => item.value === this.type);
      // openDeviceDialog({
      //   title: data.name + '详情',
      //   type: tab.type,
      //   data: data,
      // });
    },
  },
};
</script>

<style scoped lang="less">
.equipment-list {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
}
</style>
